<template>
	<view class="diy-service drag optional drag__nomove" :style="{
      right: itemData.style.right + '%',
      bottom: itemData.style.bottom + '%',
      opacity: itemData.style.opacity / 100,
    }">
		<view class="service-icon" v-if="itemData.params.type == 'phone'" @click="callPhone">
			<image :src="itemData.params.image" mode="aspectFill"></image>
		</view>
		<!-- #ifdef MP -->
		<button class="service-icon" v-if="itemData.params.type == 'wx'" open-type="contact" session-from="wxapp"
			show-message-card="true">
			<image :src="itemData.params.image" mode="aspectFill"></image>
		</button>
		<!-- #endif -->
		<button class="service-icon" v-if="itemData.params.type == 'chat' && serviceUserId != null"
			@click="gotoService">
			<image :src="itemData.params.image" mode="aspectFill"></image>
		</button>
		<!-- <button class="service-icon" open-type="contact" session-from="wxapp" v-if="itemData.params.type=='chat'">
			<image :src="itemData.params.image" mode="aspectFill"></image>
		</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serviceUserId: "",
				nickName: "",
			};
		},
		props: ["itemData", "serviceUserId", "nickName"],
		mounted() {
			const obj = uni.getStorageSync("plantServiceObj");
			if (obj) {
				const serviceObj = JSON.parse(obj);
				this.serviceUserId = serviceObj.serviceUserId;
				this.nickName = serviceObj.nickName;
			}
		},
		methods: {
			/*拨打电话*/
			callPhone() {
				let self = this;
				uni.makePhoneCall({
					phoneNumber: self.itemData.params.phoneNum,
				});
			},
			gotoService() {
				if (this.getUserId()) {
					this.gotoPage('/pages/plus/chat/chat?userId=' + this.serviceUserId + '&nickName=' + this.nickName);
				} else {
					this.doLogin();
				}

			},
		},
	};
</script>

<style>
	.diy-service {
		position: fixed;
		width: 120rpx;
		height: 120rpx;
		z-index: 90;
		right: 0;
		bottom: 0;
	}

	.diy-service .service-icon {
		width: 120rpx;
		height: 120rpx;
	}

	.diy-service button.service-icon {
		padding: 0;
		background: none;
	}

	.diy-service .service-icon image {
		width: 100%;
		height: 100%;
	}
</style>